<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改货运订单')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-order-edit" th:object="${tudaOrder}">
            <h4 class="form-header h4">货运订单信息</h4>
            <input name="id" th:field="*{id}" type="hidden">
            <input name="orderType" th:field="*{orderType}" type="hidden">
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">发起人ID：</label>-->
<!--                <div class="col-sm-8">-->
                    <input name="userId" th:field="*{userId}" class="form-control" type="hidden" required>
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">提验人：</label>
                <div class="col-sm-8">
                    <input name="vehicleInspector" th:field="*{vehicleInspector}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">业务员：</label>
                <div class="col-sm-8">
                    <input name="userName" th:field="*{userName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">业务员手机号：</label>
                <div class="col-sm-8">
                    <input name="salesmanPhone" th:field="*{salesmanPhone}" class="form-control" type="number" minlength="11" maxlength="11">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车型：</label>
                <div class="col-sm-8">
                    <input name="vehicleModel" th:field="*{vehicleModel}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车架号：</label>
                <div class="col-sm-8">
                    <input name="vin" th:field="*{vin}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">托运人：</label>
                <div class="col-sm-8">
                    <input name="client" th:field="*{client}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">托运人电话：</label>
                <div class="col-sm-8">
                    <input name="clientPhone" th:field="*{clientPhone}" class="form-control" type="number" maxlength="11">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">起始地：</label>
                <div class="col-sm-8">
                    <input name="origin" th:field="*{origin}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">目的地：</label>
                <div class="col-sm-8">
                    <input name="dest" th:field="*{dest}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">接车人：</label>
                <div class="col-sm-8">
                    <input name="receiver" th:field="*{receiver}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">接车人电话：</label>
                <div class="col-sm-8">
                    <input name="receiverPhone" th:field="*{receiverPhone}" class="form-control" type="number" maxlength="11">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">运费金额：</label>
                <div class="col-sm-8">
                    <input name="freightAmount" th:field="*{freightAmount}" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">已付金额：</label>
                <div class="col-sm-8">
                    <input name="paidAmount" th:field="*{paidAmount}" class="form-control" type="number">
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">利润：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="profit" th:field="*{profit}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{notes}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">数据状态</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('is_delete')}">
                        <input type="radio" th:id="${dict.dictCode}" name="isDelete" th:value="${dict.dictValue}" th:field="*{isDelete}" disabled="disabled">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">支付类型</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('pay_type')}">
                        <input type="radio" th:id="${dict.dictCode}" name="payType" th:value="${dict.dictValue}" th:field="*{payType}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">提验费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{inspectionFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">代驾费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{drivingFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">加油费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{refuelingFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">小板费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{smallBoardFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">叉车费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{forkliftFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">中介费(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{agencyFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
                <label class="col-sm-3 control-label">其他(单位/元)：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{otherFee}" class="form-control" style="width: 200px;" min="0" type="number">
                </div>
            </div>
            <h4 class="form-header h4">货运中转信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">汽车图片：</label>
            </div>
            <div class="form-group">
                <div class="col-sm-4" style="width: 20%" th:if="${tudaOrder.carImgList != null}" th:each="imgs,status: ${tudaOrder.carImgList}">
                    <div class="contact-box">
                        <div class="text-center">
                            <a th:href="${imgs}" th:target="_blank">
                                <img th:src="${imgs}" class="imgcode" width="280px" height="280px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">合同图片：</label>
            </div>
            <div class="form-group">
                <div class="col-sm-4" style="width: 20%" th:if="${tudaOrder.contractImgList != null}" th:each="imgs,status: ${tudaOrder.contractImgList}">
                    <div class="contact-box">
                        <div class="text-center">
                            <a th:href="${imgs}" th:target="_blank">
                                <img th:src="${imgs}" class="imgcode" width="280px" height="280px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/order";
        $("#form-order-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-order-edit').serialize());
            }
        }

        // $(".file-upload").each(function (i) {
        //     var val = $("input[name='" + this.id + "']").val()
        //     $(this).fileinput({
        //         'uploadUrl': ctx + 'common/uploads',
        //         initialPreviewAsData: true,
        //         initialPreview: [val],
        //         maxFileCount: 40,
        //         // autoReplace: true,
        //         uploadAsync: false
        //     }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        //         var rsp = data.response;
        //         alert("return urls：" + rsp.urls);
        //         $("input[name='" + event.currentTarget.id + "']").val(data.response.urls)
        //     }).on('fileremoved', function (event, id, index) {
        //
        //         $("input[name='" + event.currentTarget.id + "']").val('')
        //     })
        //     $(this).fileinput('_initFileActions');
        // });

        $(function() {
            var options = {
                data: [[${tudaOrder.tudaOrderTransferList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'name',
                    align: 'center',
                    title: '中转段',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].name' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transitBranch',
                    align: 'center',
                    title: '中转分公司',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input name='tudaOrderTransferList[%s].transitBranch' value='%s' onClick='selectDeptTree("+$.table.serialNumber(index)+")' id='treeName"+$.table.serialNumber(index)+"' type='text' placeholder='请选择中转分公司' class='form-control'><span className='input-group-addon'><i className='fa fa-search'></i></span>", index, value);
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transitBranch' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'headPhone',
                    align: 'center',
                    title: '分公司负责人',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<select name='tudaOrderTransferList[%s].headPhone' id='headPhone"+$.table.serialNumber(index)+"' class='form-control'><option value='"+value+"'>"+value+"</option> </select>", index, value);
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].headPhone' id='headPhone' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'plateNumber',
                    align: 'center',
                    title: '车牌号',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].plateNumber' value='%s'  placeholder='请填写车牌号'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transporter',
                    align: 'center',
                    title: '驾驶员',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transporter' value='%s' placeholder='请填写驾驶员'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'transporterPhone',
                    align: 'center',
                    title: '驾驶员电话',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='tudaOrderTransferList[%s].transporterPhone' value='%s'  placeholder='请填写驾驶员电话' maxlength='11'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'amount',
                    align: 'center',
                    title: '到收费用',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='tudaOrderTransferList[%s].amount' value='%s' placeholder='请填写到收费用'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transferFee',
                    align: 'center',
                    title: '中转费',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='tudaOrderTransferList[%s].transferFee' value='%s' placeholder='请填写中转费'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transitPoint',
                    align: 'center',
                    title: '中转地',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transitPoint' value='%s' placeholder='请填写中转地'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'notes',
                    align: 'center',
                    title: '备注',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].notes' value='%s'  placeholder='请填写中转地'>", index, value);
                        return html;
                    }
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
            };
            $.table.init(options);
        });

        function addRow() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                name: "中转"+$.table.serialNumber(count),
                transitBranch: "",
                headPhone: "",
                plateNumber: "",
                transporter: "",
                transporterPhone: "",
                amount: "",
                transferFee: "",
                transitPoint: "",
                notes: "",
            }
            sub.addRow(row);
        }

        var num;
        /* 用户管理-新增-选择部门树 */
        function selectDeptTree(index) {
            num = index;
            var treeId = $("#treeId").val();
            var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "system/user/selectDeptTree/" + deptId;
            var options = {
                title: '选择部门',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = $.modal.getChildFrame(index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName"+num+"").val(body.find('#treeName').val());
            $.modal.close(index);

            if(body.find('#treeId').val() > 0){
                var url = ctx + "applet/user/selectDepUser/" + body.find('#treeId').val();
                $.get(url, function(data) {
                    var optionstring = "";
                    for (var i = 0; i < data.length; i++) {
                        optionstring += "<option value=\"" + data[i].phonenumber + "\" >" +data[i].userName +"-"+ data[i].phonenumber + "</option>";
                    }
                    $("#headPhone"+num+"").html(optionstring);
                });
            }
        }

        function doSubmitPhone(index, layero){
            var body = $.modal.getChildFrame(index);
            $("#headPhone").val(body.find('#headPhone').val());
            $.modal.close(index);
        }

    </script>
</body>
</html>